<template>
  <div class="app-container">
    <div style="padding: 5px 0px"></div>
    <div>
      <el-table :data="list" fit highlight-current-row stripe ref="table">
        <el-table-column label="日期">
          <template slot-scope="scope">
            {{ scope.row.date | datetime }}
          </template>
        </el-table-column>
        <el-table-column label="操作人">
          <template slot-scope="scope">
            {{ scope.row.operatorName }}
          </template>
        </el-table-column>
        <el-table-column label="操作对象">
          <template slot-scope="scope">
            {{ scope.row.objectName }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            {{ getOperationTypeName(scope.row.operationType) }}
          </template>
        </el-table-column>
        <el-table-column label="" type="expand">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.items" :key="index">
              {{
                item.fieldCaption +
                ":" +
                (item.fieldOldCaptionValue
                  ? item.fieldOldCaptionValue
                  : item.fieldOldValue) +
                "-->" +
                (item.fieldNewCaptionValue
                  ? item.fieldNewCaptionValue
                  : item.fieldNewValue)
              }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="float: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page.sync="filter.pageIndex"
        :page-sizes="[10, 20, 50, 100, 200, 500]"
        :page-size.sync="filter.pageSize"
        :prev-click="handlePrePage"
        :next-click="handleNextPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getOperationLogs } from "@/api/log";
export default {
  components: {
    toolbar,
  },
  data() {
    return {
      list: null,
      filter: {
        pageIndex: 1,
        pageSize: 10,
        moduleCode: this.moduleCode,
        objectId: this.objectId,
        activated: null,
        includeDetail: true,
      },
      total: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      if (!this.moduleCode) return;
      
      getOperationLogs(this.filter).then((res) => {
        res = res || { totalCount: 0, items: [] };
        this.total = res.totalCount;
        this.list = res.items;
      });
    },
    handlePageChange(pageIndex) {
      this.filter.pageIndex = pageIndex;
      this.getData();
    },
    handleSizeChange(pageSize) {
      this.filter.pageSize = pageSize;
      this.getData();
    },
    handlePrePage(currentPageIndex) {
      this.filter.pageIndex = currentPageIndex - 1;
    },
    handleNextPage(currentPageIndex) {
      this.filter.pageIndex = currentPageIndex + 1;
    },
    handleRefresh() {
      this.pageIndex = 1;
      this.pageSize = 10;
      this.getData();
    },
    handleSearch() {
      this.handleRefresh();
    },
    getOperationTypeName(type) {
      let result = "";
      switch (type) {
        case 1:
          result = "新增";
          break;
        case 2:
          result = "更新";
          break;
        case 3:
          result = "删除";
          break;
      }

      return result;
    },
  },
  computed: {},
  props: {
    moduleCode: {
      type: String,
      default: null,
    },
    objectId: {
      type: String,
      default: null,
    },
  },
};
</script>
